<template>
  <div class="warpper-box">
    <div class="inner_box">
      <el-form :inline="true" size="small" :model="formInline" ref="formInline">
        <el-form-item label="标题" prop="title">
          <el-input v-model="formInline.title" placeholder="标题"></el-input>
        </el-form-item>
        <el-form-item label="日期" prop="time">
          <el-date-picker
            v-model="formInline.time"
            type="daterange"
            range-separator="至"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="loadList(true)"
            >搜索</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-setting"
            @click="reset('formInline')"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <el-table :data="tableData" ref="table" border stripe>
        <el-table-column label="序号" width="50" :index="1">
          <template #default="scope">
            {{ (models.pageNum - 1) * models.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          show-overflow-tooltip
          resizable
          label="标题"
        >
        </el-table-column>
        <el-table-column
          prop="publisher"
          show-overflow-tooltip
          resizable
          label="发布人"
        />
        <el-table-column
          prop="createTime"
          show-overflow-tooltip
          resizable
          label="发布时间"
          :formatter="formatDate"
        />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="detailOpen(scope.row, false)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-pagination
          class="page-footer"
          background
          layout="total,prev,pager,next,sizes,jumper"
          :total="models.total"
          :page-sizes="[10, 20, 30, 40, 50]"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
        />
      </el-row>

      <noticeDetail ref="createNoticeDetail"></noticeDetail>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import { getMyNoticeList, setNoticeRecord } from "@/api/supplier_api";
import noticeDetail from "@/views/supplier/notice/notice_detal.vue";
import moment from "moment";
export default {
  name: "noticeList",
  components: {
    noticeDetail
  },
  data() {
    return {
      tableData: [],
      formInline: {
        title: "",
        time: []
      },
      models: { pageNum: 1, pageSize: 5, total: 0 }
    };
  },
  filters: {
    formatDate(value) {
      if (!value) {
        return "";
      }
      return moment(value).format("YYYY-MM-DD HH:mm:ss");
    }
  },
  computed: {
    ...mapGetters(["permission_user"])
  },
  mounted() {
    this.loadList(true);
  },
  methods: {
    async loadList(formData) {
      let param = {};
      let supplier = this.permission_user.purchaseSupplier;
      if (supplier !== null && typeof supplier === "object") {
        param.receiverId = supplier.id;
      }
      if (typeof formData == "boolean") {
        this.models.pageNum = 1;
        this.models.pageSize = 10;
      }
      if (this.formInline.time && this.formInline.time.length) {
        param.publishStartTime = this.formInline.time[0];
        param.publishEndTime = this.formInline.time[1];
      }
      param.title = this.formInline.title;
      param.pageNum = this.models.pageNum;
      param.pageSize = this.models.pageSize;
      const { data } = await getMyNoticeList(param);
      this.tableData = data.list;
      this.models.total = data.total;
      },
    detailOpen(row, result) { 
        if (row.isRead == 0) {
          this.editNoticeRecord(row.recordId)
        }
        this.$refs.createNoticeDetail.openDetail(row, result)
      },
    async editNoticeRecord(id) {
      await setNoticeRecord(id)
    },
    formatDate(row, column) {
      const date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD  HH:mm:ss");
    },
    handlePageChange(page) {
      this.models.pageNum = page;
      this.loadList();
    },
    handleSizeChange(page) {
      this.models.pageSize = page;
      this.loadList();
    },
    reset(formName) {
      this.$refs[formName].resetFields();
      this.loadList(true);
    }
  }
};
</script>
